<template>
  <div class="comment-list">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <CommentItem :cmt="c" v-for="(c, i) in list" :key="i" />
    </van-list>
  </div>
</template>

<script>
// 导入组件
import CommentItem from './CommentItem.vue'

import { getComments } from '@/api/comment.js'

export default {
  name: '',
  props: {
    // 目标id（文章id/评论id）
    aid: {
      // required: true,
      default: 8144
    },
    // 列表类型：a-文章的评论列表 c-评论的回复列表
    type: {
      type: String,
      default: 'a'
    },
    // 评论的 回复数组
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      loading: false,
      finished: false,
      query: {
        type: this.type, // 列表类型
        source: this.aid, // 目标id（文章id/评论id）
        offset: null, // 偏移量（分页用）
        limit: 10 // 页容量
      }
    }
  },
  created() {
    // 组件一开始 就将 数组地址 传给父组件
    // 方便 父组件 通过地址 来操作 评论数组
    this.$emit('onSetList', this.list)
  },
  methods: {
    async onLoad() {
      try {
        // a.发送请求获取评论列表
        const res = await getComments(this.query)
        // b.获取并设置数据
        const data = res.data.data
        this.list.push(...data.results) // 评论列表数组
        this.query.offset = data.last_id // 偏移量
        // 补充：将 总评论数 传给 父组件显示
        this.$emit('changeTotal', data.total_count)

        // c.关闭加载中状态
        this.loading = false
        // d.结束 列表 触底加载
        if (data.results.length === 0) {
          this.finished = true
        }
      } catch (error) {
        console.log(error)
        this.$toast.fail('服务器繁忙...')
      }
    }
  },
  computed: {},
  watch: {},
  components: { CommentItem }
}
</script>

<style lang="less" scoped>
</style>
